<script lang="ts" setup>
import participateBg from '@/assets/images/home/participate-bg.png';
import profileBg from '@/assets/images/home/profile-bg.png';
import proposalBg from '@/assets/images/home/proposal-bg.png';
import delegateBg from '@/assets/images/home/delegate-bg.png';
import voteBg from '@/assets/images/home/vote-bg.png';
import { useI18n } from 'vue-i18n';
import { openUrl } from '@/utils';

const { t } = useI18n();
</script>

<template>
  <div class="participate">
    <!--  TODO 气泡-->
    <div class="participate-title" data-aos-easing="ease" data-aos-delay="300">
      {{ t('message.home.participate.title') }}
    </div>
    <div class="participate-intro" data-aos="flip-up">
      {{ t('message.home.participate.intro') }}
    </div>
    <img
      :src="participateBg"
      class="participate-bg float-animation"
      alt=""
      data-aos="zoom-in-left"
    />
    <div class="participate-list">
      <v-card
        variant="outlined"
        class="participate-item"
        data-aos="fade-up"
        data-aos-duration="300"
      >
        <v-card-text class="flex flex-col">
          <img :src="voteBg" class="participate-item-bg" alt="" />
          <div class="px-4">
            <div class="participate-item-title">
              {{ t('message.home.participate.vote.title') }}
            </div>
          </div>
        </v-card-text>
        <div class="px-4">
          <v-card-text class="participate-item-intro">
            {{ t('message.home.participate.vote.intro') }}
          </v-card-text>
          <v-card-text>
            <v-btn
              variant="outlined"
              color="#2B6EEF"
              class="participate-btn"
              rounded="pill"
              @click.stop="
                openUrl(
                  'https://shark-dao.gitbook.io/sharkdao-whitepaper-1/how-to-participate/cast-a-vote'
                )
              "
            >
              <v-icon size="large">mdi-arrow-right</v-icon>
            </v-btn>
          </v-card-text>
        </div>
      </v-card>

      <v-card
        variant="outlined"
        class="participate-item"
        data-aos="fade-up"
        data-aos-duration="350"
      >
        <v-card-text class="flex flex-col">
          <img :src="delegateBg" class="participate-item-bg" alt="" />
          <div class="px-4">
            <div class="participate-item-title">
              {{ t('message.home.participate.delegate.title') }}
            </div>
          </div>
        </v-card-text>
        <div class="px-4">
          <v-card-text class="participate-item-intro">
            {{ t('message.home.participate.delegate.intro') }}
          </v-card-text>
          <v-card-text>
            <v-btn
              variant="outlined"
              color="#2B6EEF"
              class="participate-btn"
              rounded="pill"
              @click.stop="
                openUrl(
                  'https://shark-dao.gitbook.io/sharkdao-whitepaper-1/how-to-participate/delegate'
                )
              "
            >
              <v-icon size="large">mdi-arrow-right</v-icon>
            </v-btn>
          </v-card-text>
        </div>
      </v-card>

      <v-card
        variant="outlined"
        class="participate-item"
        data-aos="fade-up"
        data-aos-duration="400"
      >
        <v-card-text class="flex flex-col">
          <img :src="profileBg" class="participate-item-bg" alt="" />
          <div class="px-4">
            <div class="participate-item-title">
              {{ t('message.home.participate.profile.title') }}
            </div>
          </div>
        </v-card-text>
        <div class="px-4">
          <v-card-text class="participate-item-intro">
            {{ t('message.home.participate.profile.intro') }}
          </v-card-text>
          <v-card-text>
            <v-btn
              variant="outlined"
              color="#2B6EEF"
              class="participate-btn"
              rounded="pill"
              @click.stop="
                openUrl(
                  'https://shark-dao.gitbook.io/sharkdao-whitepaper-1/how-to-participate/edit-your-profile'
                )
              "
            >
              <v-icon size="large">mdi-arrow-right</v-icon>
            </v-btn>
          </v-card-text>
        </div>
      </v-card>

      <v-card
        variant="outlined"
        class="participate-item"
        data-aos="fade-up"
        data-aos-duration="450"
      >
        <v-card-text class="flex flex-col">
          <img :src="proposalBg" class="participate-item-bg" alt="" />
          <div class="px-4">
            <div class="participate-item-title">
              {{ t('message.home.participate.proposal.title') }}
            </div>
          </div>
        </v-card-text>
        <div class="px-4">
          <v-card-text class="participate-item-intro">
            {{ t('message.home.participate.proposal.intro') }}
          </v-card-text>
          <v-card-text>
            <v-btn
              variant="outlined"
              color="#2B6EEF"
              class="participate-btn"
              rounded="pill"
              @click.stop="
                openUrl(
                  'https://shark-dao.gitbook.io/sharkdao-whitepaper-1/how-to-participate/add-a-proposals'
                )
              "
            >
              <v-icon size="large">mdi-arrow-right</v-icon>
            </v-btn>
          </v-card-text>
        </div>
      </v-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.participate {
  @apply relative flex flex-col mt-40 xs:mt-14 xs:mx-6 sm:mx-20 md:mx-10 lg:mx-28 xl:mx-44;
  .participate-title {
    font-size: 72px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    text-align: center;
    @apply self-center xs:text-[32px] md:text-[56px];
  }

  .participate-intro {
    width: 582px;
    font-size: 16px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7a7893;
    line-height: 26px;
    margin-top: 24px;
    margin-bottom: 86px;
    z-index: 99;
    @apply text-center self-center xs:mt-4 xs:w-full xs:mb-0;
  }

  .participate-bg {
    @apply absolute top-8 xl:right-8 lg:right-4 md:right-16 sm:hidden xs:hidden;
  }

  .participate-list {
    @apply self-center mt-12 grid grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 xs:grid-cols-1 gap-x-6 lg:gap-y-8 md:gap-y-8 sm:gap-y-7 xs:gap-y-4;
    .participate-item {
      width: 348px;
      background: #ffffff;
      border-radius: 32px;
      border: 1px solid #bed4ff;
      @apply xs:w-full sm:w-[348px] md:w-[348px] lg:w-[308px] xl:w-[348px] xs:px-2;

      .participate-item-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 220px;
        height: 214px;
      }

      .participate-item-title {
        font-size: 32px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #161615;
        margin-top: 184px;
      }

      .participate-item-intro {
        font-size: 20px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #7a7893;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-word;
        //width: 208px;
        @apply mt-2 mb-2;
      }

      .participate-btn {
        width: 98px;
        //height: 56px;
        border-radius: 28px;
        border: 1px solid #2b6eef;
        @apply mb-6;
      }
    }
  }
}
</style>
